<template>
  <div class="home_container">
    <div class="home_title">请选择您要进入的系统</div>

    <div class="logout_btn logout_btn2" v-show="isshow" @click="adminfunc">
      <i class="el-icon-switch-button"></i>管理员
    </div>

    <div class="logout_btn" @click="logOut">
      <i class="el-icon-switch-button"></i>退出
    </div>
    <div class="home_box">
      <div class="tab1 tab_item hvr-float1" @click="check1()"></div>
      <div class="tab2 tab_item hvr-float2" @click="check2()"></div>
      <div class="tab3 tab_item hvr-float3" @click="check3()"></div>
      <div class="tab4 tab_item hvr-float4" @click="check4()"></div>
      <div class="tab5 tab_item hvr-float5" @click="check5()"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      loginForm: {
        userName: "",
        password: "",
      },
      loginRules: {
        userName: [
          { required: true, message: "请输入用户名！", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码！", trigger: "blur" },
        ],
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
      userInfo: this.$jwt.decode(localStorage.getItem("token")),
      isshow: false,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  methods: {
    check1(val) {
      let tokenString1 = localStorage.getItem("token");
      let userInfo1 = this.$jwt.decode(tokenString1);
      // console.log(userInfo1.department);
      const newarr = [];
      userInfo1.department.find((val, i) => {
        // console.log(val, i);
        newarr.push(val.id);
      });
      console.log(newarr);
      if (newarr.indexOf(1) != -1) {
        console.log("进入能源管理");
        window.location.href = "http://10.109.88.193:8000/";
        return false;
      } else {
        this.$message({
          message: "暂无访问权限,请联系管理员！",
          center: true,
          type: "error",
          customClass: "message-style",
        });
        return false;
      }
    },
    check2(val) {
      let tokenString1 = localStorage.getItem("token");
      let userInfo1 = this.$jwt.decode(tokenString1);
      // console.log(userInfo1.department);
      const newarr = [];
      userInfo1.department.find((val, i) => {
        // console.log(val, i);
        newarr.push(val.id);
      });
      // console.log(newarr.indexOf(1) != -1);
      if (newarr.indexOf(2) != -1) {
        console.log("只能运维");
        window.open("http://10.109.88.193:8080/");
        return false;
      } else {
        this.$message({
          message: "暂无访问权限,请联系管理员！",
          center: true,
          type: "error",
          customClass: "message-style",
        });
        return false;
      }
    },
    check3(val) {
      let tokenString1 = localStorage.getItem("token");
      let userInfo1 = this.$jwt.decode(tokenString1);
      const newarr = [];
      userInfo1.department.find((val, i) => {
        newarr.push(val.id);
      });
      // console.log(newarr);
      if (newarr.indexOf(3) != -1) {
        console.log("智能监控");
        window.location.href = "http://10.109.88.193:8001/";
        return false;
      } else {
        this.$message({
          message: "暂无访问权限,请联系管理员！",
          center: true,
          type: "error",
          customClass: "message-style",
        });
        return false;
      }
    },
    check4(val) {
      let tokenString1 = localStorage.getItem("token");
      let userInfo1 = this.$jwt.decode(tokenString1);
      const newarr = [];
      userInfo1.department.find((val, i) => {
        newarr.push(val.id);
      });
      // console.log(newarr);
      if (newarr.indexOf(4) != -1) {
        console.log("危废");
        window.location.href = "http://10.109.88.193:8003/";
        return false;
      } else {
        this.$message({
          message: "暂无访问权限,请联系管理员！",
          center: true,
          type: "error",
          customClass: "message-style",
        });
        return false;
      }
    },
    check5(val) {
      let tokenString1 = localStorage.getItem("token");
      let userInfo1 = this.$jwt.decode(tokenString1);
      const newarr = [];
      userInfo1.department.find((val, i) => {
        newarr.push(val.id);
      });
      // console.log(newarr);
      if (newarr.indexOf(5) != -1) {
        console.log("生命安全");
        window.location.href = "http://10.109.88.193:8002/";
        return false;
      } else {
        this.$message({
          message: "暂无访问权限,请联系管理员！",
          center: true,
          type: "error",
          customClass: "message-style",
        });
        return false;
      }
    },


    //退出
    logOut() {
      localStorage.clear();
      this.$router.push({ path: "/login" });
    },
    adminfunc() {
      // localStorage.clear();
      console.log(4567);
      // this.$router.push({ path: "/login" });
      this.$router.push({ path: "/register" });
    },
  },
  created() {
    let tokenString1 = localStorage.getItem("token");
    let userInfo1 = this.$jwt.decode(tokenString1);
    // console.log(userInfo1.department);
    // userInfo1.department.find((val, i) => {
    //   console.log(val, i);
    // });
    // console.log(userInfo1.department[userInfo1.department.length - 1].id);
    if (userInfo1.department[userInfo1.department.length - 1].id == 6) {
      this.isshow = true;
    } else {
      this.isshow = false;
    }
  },
};
</script>
<style lang="less" scoped>
.message-style {
  width: 1.75rem !important;
}
.home_container {
  display: flex;
  flex-direction: column;
  background: url("../assets/img/tab-bj.jpg") no-repeat;
  background-size: cover;
  height: 100vh;
}
.home_title {
  height: 0.4rem;
  font-size: 0.4rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 0.3rem;
  margin: 1.6rem auto;
}
.logout_btn {
  width: 80px;
  height: 40px;
  border-radius: 10%;
  background-color: rgb(52, 81, 161);
  box-shadow: 0px 15px 10px -15px rgb(39, 39, 41);
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
  line-height: 40px;
  text-align: center;
  position: absolute;
  top: 2%;
  right: 2%;
}
.logout_btn2 {
  right: 7%;
}
.home_box {
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.tab_item {
  width: 3.6rem;
  height: 5.625rem;
  border: 1px solid transparent;
  border-radius: 0.175rem;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.tab1 {
  background: url("../assets/img/1.png") no-repeat;
  background-size: 100% 100%;
}
.tab2 {
  background: url("../assets/img/2.png") no-repeat;
  background-size: 100% 100%;
}
.tab3 {
  background: url("../assets/img/3.png") no-repeat;
  background-size: 100% 100%;
}
.tab4 {
  background: url("../assets/img/4.png") no-repeat;
  background-size: 100% 100%;
}
.tab5 {
  background: url("../assets/img/5.png") no-repeat;
  background-size: 100% 100%;
}

.hvr-float1:hover,
.hvr-float1:focus,
.hvr-float1:active {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  background: url("../assets/img/1-x.png") no-repeat;
  background-size: 100% 100%;
}

.hvr-float2:hover,
.hvr-float2:focus,
.hvr-float2:active {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  background: url("../assets/img/2-x.png") no-repeat;
  background-size: 100% 100%;
}

.hvr-float3:hover,
.hvr-float3:focus,
.hvr-float3:active {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  background: url("../assets/img/3-x.png") no-repeat;
  background-size: 100% 100%;
}

.hvr-float4:hover,
.hvr-float4:focus,
.hvr-float4:active {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  background: url("../assets/img/4-x.png") no-repeat;
  background-size: 100% 100%;
}

.hvr-float5:hover,
.hvr-float5:focus,
.hvr-float5:active {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  background: url("../assets/img/5-x.png") no-repeat;
  background-size: 100% 100%;
}
</style>
